<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="box box_2">
                <div class="case_box mb_20">
                    <div class="wallet_box gray_table text_c">
                        <v-data-table :data='getData' :currentData='dataList.records' :columns='columnsData' stripe :emptyText="not_data">
                            <template slot="td" slot-scope="props">
                                <div class="text_l" style="padding-left: 20%;" v-if="props.column.field === 'coinName'">
                                    <img class="img mr_10" :src="img_url_appSource + props.item.currency + '.png'" />
                                    <span class="text">{{ props.content }}</span>
                                </div>
                                <div v-else-if="props.column.field === 'valuation'">
                                    <span class="text">{{ Number(props.content).toFixed(2) }}</span>
                                </div>
                                <div v-else-if="props.column.field === 'operate'">
                                    <a href="javascript:void(0)" class="link">查看明细</a>
                                </div>
                                <span v-else>{{ props.content }}</span>
                            </template>
                        </v-data-table>
                    </div>
                </div>
                <div class="case_box desc_box mb_20">
                    <h2 class="bold">请选择币种查看挖矿收益</h2>
                    <p class="desc">挖矿收益一般是在订单审核通过后的第三天可见（T+3），正常每日到账时间为 09:00 - 12:00，如遇收益到账拥堵或延期请您耐心等候，或可在帮助中心通过提交工单处理，感谢您的谅解与支持。</p>
                    <div class="currency_box">
                        <div class="list" v-for="item of currencysList" :key="item.id" @click="toggleCurrencys(item)">
                            <div :class="['img_box pointer', dataRecords.currency === item.currency ? 'select' : '']">
                                <img class="img" :src="img_url_appSource + item.logo" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="case_box logs_box">
                    <div class="title cl">
                        <h2 class="f_l bold">
                            <img class="img" :src="img_url_appSource + dataRecords.logo" />
                            {{ dataRecords.currency + ' ' + dataRecords.currencyName }}
                        </h2>
                        <span class="f_r link pointer">明细</span>
                    </div>
                    <div class="content mt_30 gray_table text_c">
                        <v-data-table :data='getMiningRecords' :currentData="dataRecords.records" :columns='columnsRecords' stripe :emptyText="not_data">
                            <template slot="td" slot-scope="props">
                                <div v-if="props.column.field === 'remark1'">
                                    <span class="color: #EEAF00;" v-if="props.content === '2'">已发放</span>
                                    <span v-else>{{ props.content }}</span>
                                </div>
                                <div v-else-if="props.column.field === 'createTime'">
                                    <div class="text_l" style="display:inline-block;">{{ props.content[0] }}<br />{{ props.content[1] }}</div>
                                </div>
                                <div v-else-if="props.column.field === 'operate'">
                                    <span class="font_theme pointer">查看订单</span>
                                </div>
                                <span v-else>{{ props.content }}</span>
                            </template>
                        </v-data-table>
                        <div class="pagination_box">
                            <v-pagination @change="changeRecordsPage" :total="dataRecords.total" :show-total="showRecordsTotal" show-quick-jumper></v-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getCurrencys } from '@doapis/currency/currency.js';
    import { getMiningIncome, getMiningRecords } from '@doapis/personal/wallet.js';

    export default {
        name: "MiningAccount",
        props: {
            hasMoney: {
                type: Boolean,
                default: false
            }
        },
        data: function() {
            return {
                dataForm: {
                    value: '300',
                    password: ''
                },
                dataList: { records: [] },
                dataRecords: {
                    current: 1,
                    currency: '',
                    currencyName: '',
                    logo: '',
                    records: [],
                    total: 0
                },
                currencysList: [],
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                },
                columnsData:[
                    { title:"币种", field:'coinName', width: '16%' },
                    { title:"今日产出", field:'todayyield', width: '16%' },
                    { title:"昨日产出", field:'yesterday', width: '16%' },
                    { title:"锁定收益", field:'locksnumber', width: '16%' },
                    { title:"累计产出", field:'outputnumber', width: '16%' },
                    { title:"操作", field:'operate', width: '16%' },
                ],
                columnsRecords:[
                    { title:"订单号", field:'orderNo', width: '16%' },
                    { title:"挖矿周期", field:'cperiod', width: '16%' },
                    { title:"今日产出", field:'cnumber', width: '16%' },
                    { title:"累计产出", field:'totalNumber', width: '16%' },
                    { title:"到账时间", field:'createTime', width: '16%' },
                    { title:"挖矿状态", field:'remark1', width: '16%' },
                    { title:"操作", field:'operate', width: '16%' },
                ],
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            getData: function(params) {
                const that = this;
                const hasMoney = this.hasMoney;
                return params ? $.$getPromiseNullData() : getMiningIncome({ memberid: that.userDATA.memberid, boolhasMoney: hasMoney }).then(function(res) {
                    that.dataList.records = res.data;
                    return { result: [] };
                });
            },
            getCurrencys: function() {
                const that = this;
                getCurrencys().then(function(res) {
                    const data = res.records;
                    that.currencysList = data;

                    that.toggleCurrencys({
                        currency: data[0].currency,
                        remark2: data[0].remark2,
                        logo: data[0].logo
                    });
                });
            },
            toggleCurrencys: function(params) {
                this.dataRecords.currency = params.currency;
                this.dataRecords.logo = params.logo;
                this.dataRecords.currencyName = params.remark2;
                this.getMiningRecords();
            },
            getMiningRecords: function(params) {
                const that = this;
                
                return params ? $.$getPromiseNullData() : getMiningRecords({
                    current: that.dataRecords.current,
                    currency: that.dataRecords.currency,
                    descs: 'createtime',
                    remark1: '2',
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    const data = res.data.records;
                    data.forEach(function(item) {
                        item.cperiod = (item.cperiod || 0) + ' 天';
                        item.cnumber = item.cnumber + ' ' + item.currency;
                        item.createTime = item.createTime ? $.$getFormatMD(new Date(item.createTime), true).split(' ') : '数据错误' ;
                        item.totalNumber = '暂不显示';
                    });
                    that.dataRecords.records = data;
                    that.dataRecords.total = res.data.total;
                    return { result: [] };
                });
            },
            showRecordsTotal: function(val) {
                return '全部' + this.dataRecords.total + '条';
            },
            changeRecordsPage: function(val) {
                this.dataRecords.current = val;
                this.getMiningRecords();
            },
        },
        mounted: function() {
            this.getData();
            this.getCurrencys();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
    }
    .content_box{
        .box{
            &.box_2{
                .case_box{
                    background-color: white;
                    .img{
                        width: 26px;
                        display: inline;
                        vertical-align: middle;
                    }
                }
                .desc_box{
                    padding: 20px;
                    .desc{
                        margin-top: 10px;
                        font-size: 10px;
                        color: #999;
                    }
                    .currency_box{
                        .flex_row_wrap;
                        padding: 40px 0 20px 0;
                        .list{
                            width: 16.66%;
                            margin-bottom: 20px;
                            .img_box{
                                width: 70px;
                                margin: 0 auto;
                                line-height: 70px;
                                border-radius: 8px;
                                text-align: center;
                                border:2px solid white;
                                background-color: #F7F7F7;
                                &.select{
                                    color: white;
                                    border-color: @theme_color;
                                    background-color: white;
                                }
                                .img{
                                    width: 60%;
                                    display: inline;
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
                }
                .logs_box{
                    >.title{
                        padding: 16px 20px;
                        color: white;
                        background-color: @theme_color;
                    }
                    .link{
                        margin-top: 8px;
                        font-size: 10px;
                    }
                    .content{
                        padding: 0 30px 25px 30px;
                        font-size: 16px;
                        margin-bottom: 10px;
                        /deep/ .ant-table-tbody>tr>td, /deep/ .ant-table-thead>tr>th{
                            text-align: center;
                            font-size: 13px;
                        }
                    }
                }
            }
        }
    }
</style>
